<template>
    <div class="dialog_recharge">
        <div class="list">
            <div class="item" :class="active == item.id ? 'active' : ''" v-for="(item, index) in list" :key="index"
                @click="change(item)">
                ￥{{ item.price }}
            </div>
        </div>
        <el-input v-model="value" :placeholder="$t('my.自定义充值金额')" type="number" @input="active = ''"
            class="input"></el-input>
        <div class="submit" @click="submit">{{ $t('my.立即充值') }}</div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            active: '',

            list: [],
            value: ""
        }
    },
    async created() {
        let { list } = await this.$api.usersApi.recharge_config();
        this.list = list;
    },
    methods: {
        change(item) {
            this.active = item.id;
            this.value = item.price;
        },
        async submit() {
            await this.$api.usersApi.userRecharge({
                amount: this.value
            })
            this.$message({
                message: this.$t('my.充值成功'),
                type: 'success'
            });
            this.$emit("ok")
        }
    }
}
</script>
<style lang="scss" scoped>
.dialog_recharge {
    .list {
        display: flex;
        flex-wrap: wrap;

        .item {
            width: 150px;
            height: 120px;
            line-height: 120px;
            text-align: center;
            font-weight: bold;
            font-size: 20px;
            color: #333333;
            border-radius: 6px;
            margin-right: 15px;
            margin-bottom: 15px;
            background: #F7F7F7;
            cursor: default;

            &:nth-child(3n) {
                margin-right: 0;
            }

            &.active {
                color: #FFFFFF;
                background: linear-gradient(to left, #4488FF, #2BBCFF);
            }
        }
    }

    .input {
        &:deep(.el-input__inner) {

            height: 52px;
        }

        background: #F5F5F5;
    }

    .submit {
        width: 428px;
        height: 52px;
        line-height: 52px;
        text-align: center;
        font-weight: bold;
        font-size: 20px;
        color: #FFFFFF;
        background: linear-gradient(270deg, #4488FF 0%, #2BBCFF 100%);
        border-radius: 8px 8px 8px 8px;
        margin: 0 auto;
        margin-top: 48px;
        cursor: pointer;
    }
}
</style>